<template>
  <div class="userEvaluate">
    <div style="display: flex;justify-content: space-between;">
      <span>用户评价（{{ counts }}）</span>
      <span @click="goPinglun">全部评价></span>
    </div>
    <div style="display: flex;padding: 10px;">
      <div class="haoping">93% <br> 好评率</div>
      <div>111</div>
    </div>
    <div class="evaluate">
      <div style="display: flex;align-items: center;">
        <div class="top">
          <img :src="obj.consumerImg" width="30px" height="30px">
        </div>
        <p style="flex:1;display: flex;flex-direction: column;">
          <span style="font-size: 14px;">{{obj.commentator }}</span>
          <span style="color: rgb(187, 107, 9);">{{ obj.isGood == 1 ? "好评" : obj.isGood == 2 ? "中评" : "差评"
          }}</span>
        </p>
        <p style="font-size: 12px;">
          {{ obj.replyDate }}
        </p>
      </div>
      <div>
        {{ obj.review }}
      </div>
      <div class="custorImgArea">
        <img v-for="(item, index) in obj.evaluateImg.split('||')" :key="index" width="60px" height="60px"
          :src="item">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    this.obj()
  },
  data() {
    return {
      obj:{}
    }
  },
  props: {
    assess: Array,
    counts: Number
  },
  methods: {
    goPinglun() {
      // this.$router.push("/userEvaluates")
      this.$emit("click")
    },
  },
  computed: {
    obj(){
      this.obj=this.assess[0]
      console.log(this.assess[0],obj)
    }
  }
}
</script>

<style scoped lang="scss">
.userEvaluate {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 10px;

  .haoping {
    color: rgb(114, 229, 191);
    border-right: 2px solid #625c5c;
    width: 80px;
    font-size: 18px;
    font-weight: bold;
    border-right: 1px solid #eee;
  }

  .evaluate {
    width: 96%;
    margin: 0 auto;
    height: 50%;
    background: #eee;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;

    .top {
      overflow: hidden;
      width: 30px;
      height: 30px;
      border-radius: 30px;
      margin-right: 10px;
    }

    .custorImgArea {
      overflow: scroll;
      display: flex;
      justify-content: space-evenly;

      img {
        margin: 10px;
      }
    }
  }
}
</style>